<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
    <script src="/jquery-3.6.0.min.js"></script>
	<script>
		$(function(){//让整个页面加载完成之后再次执行，以后所有的操作都应该在函数内完成
			// alert("jQuery调试？？？")
            //常见Ajax用法1.$.get(url地址，提交数据，回调函数，返回值类型）2.$.post(...)
            //返回值类型一般为JSON字符串
            /*
			$.get("/findAjaxUser",function (result) {//此处会拦截页面请求，并发出此请求
				// for(index in result){
				// 	var user = result[index]
				// 	console.log(user);
				// }
				for(user of result){
					var id = user.id
					var name = user.name
					var age = user.age
					var sex = user.sex
					var tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
					$("#userTable").append(tr)
				}
            })
			//带参：1.字符串'id=1&name=tom'     2.对象{key:value,key2:value2..}
			//var object = {key:value,key2:value2..}
			$.get("/findAjaxUser",{id:1,name:'tomcat'},function (result) {
				console.log("请求成功！！")
			})
			//$.getJSON("/findAjaxUser",{id:1,name:'tomcat'},function (result) {})要求返回的是JSON串
			
		   $.post('/findAjaxUser',{id:1,name:'tomcat'},function(result){
			   console.log("post请求成功")
		   })
		   */
		  
		   $.ajax({
			   type:"get",
			   url:"/findAjaxUser",
			   data:{id:1,name:'tomcat'},
			   success:function(result){  //成功之后的回调函数
				   console.log("ajax请求成功")
			   },
			   error:function(result){   //失败之后的回调函数
				   console.log("ajax请求失败")
			   }
		   })
			
		})
	</script>
</head>

<body>
    <table border="1px" align="center" width="500px" id="userTable">
        <tr align="center">
            <td colspan="4"><h3>用户列表</h3></td>
        </tr>
        <tr align="center">
            <td>ID</td>
            <td>名称</td>
            <td>年龄</td>
            <td>性别</td>
			<td>操作</td>
        </tr>
		<tr align="center">
		    <td>1</td>
		    <td>测试</td>
		    <td>20</td>
		    <td>男</td>
			<td>
				<button type="button">修改</button>
				<button type="button">删除</button>
			</td>
		</tr>

    </table>
</body>
</html>